//用户详细列表
<template>
    <div> 
        <mt-index-list >
            <mt-index-section v-for="(site,index) in siteData" :key="index" :index="site">
                <div class="main" v-for="(item,index) in showData" v-if="item.sortName==site" :key="index">
                    <div class="flex">
                        <div class="head">
                            <img :src="item.studentPhoto" />
                        </div>
                        <div class="classroom">
                            <div class="className">{{item.studentName}}</div>
                        </div>
                    </div>
                    <div >
                        <!-- <div v-if="testType!=1" class="more" @click="more(index)"></div> -->
                        <div v-if="testType==1" class="flex" style="width:4rem;">
                            <div @click="testHeathy(false,index)" :class="{active:item.temperatureType==0}" class="selectButton">正常</div>
                            <div @click="testHeathy(true,index)" :class="{active:item.temperatureType==1}" class="selectButton">发烧</div>
                            <div v-if="item.feverNum&&item.temperatureType">{{(0.1*item.feverNum).toFixed(1)}}℃</div>
                        </div>
                        <div v-if="testType==2" class="flex" style="width:4rem;">
                            <div @click="testHeathy(false,index)" :class="{active:item.testHign}" class="selectButton">身高</div>
                            <div @click="testHeathy(true,index)" :class="{active:item.testWeight}" class="selectButton">体重</div>
                            <div v-if="item.height&&item.testHign">{{item.height}}cm</div>
                            <div v-if="item.weight&&item.testWeight">{{item.weight}}kg</div>
                        </div>
                        <div v-if="testType==3" class="flex" style="width:5rem;">
                            <div @click="testHeathy(false,index)" :class="{active:item.testLeftEye}" class="selectButton">左眼</div>
                            <div @click="testHeathy(true,index)" :class="{active:item.testRightEye}" class="selectButton" style="margin: 0 0.1667rem;">右眼</div>
                            <div @click="testHeathy(3,index)" :class="{active:item.testBothEyes}" class="selectButton">双眼</div>
                            <div v-if="item.leftSight&&item.testLeftEye">{{(0.1*item.leftSight).toFixed(1)}}</div>
                            <div v-if="item.rightSight&&item.testRightEye">{{(0.1*item.rightSight).toFixed(1)}}</div>
                            <div v-if="item.bothSight&&item.testBothEyes">{{(0.1*item.bothSight).toFixed(1)}}</div>
                        </div>
                        <!-- 体温编辑器 -->
                        <div v-if="item.temperatureType">
                            <mt-range
                            v-model="item.feverNum"
                            :min="370"
                            :max="420"
                            :step="1"
                            :bar-height="4">
                            </mt-range>
                        </div>
                        <!-- 身高编辑器 -->
                        <div v-if="item.testHign">
                            <mt-range
                            v-model="item.height"
                            :min="1"
                            :max="200"
                            :step="1"
                            :bar-height="4">
                            <div slot="end" @click="rangeAddorDelete(false,1,index)" class="rangeAdd"></div>
                            <div slot="start" @click="rangeAddorDelete(false,-1,index)" class="rangeDelete"></div>
                            </mt-range>
                        </div>
                        <!-- 体重编辑器 -->
                        <div v-if="item.testWeight">
                            <mt-range
                            v-model="item.weight"
                            :min="1"
                            :max="100"
                            :step="1"
                            :bar-height="4">
                            <div slot="end" @click="rangeAddorDelete(true,1,index)" class="rangeAdd"></div>
                            <div slot="start" @click="rangeAddorDelete(true,-1,index)" class="rangeDelete"></div>
                            </mt-range>
                        </div>
                        <!-- 左眼编辑器 -->
                        <div v-if="item.testLeftEye">
                            <mt-range
                            v-model="item.leftSight"
                            :min="1"
                            :max="53"
                            :step="1"
                            :bar-height="4">
                            <div slot="end" @click="rangeAddorDelete(false,1,index)" class="rangeAdd"></div>
                            <div slot="start" @click="rangeAddorDelete(false,-1,index)" class="rangeDelete"></div>
                            </mt-range>
                        </div>
                        <!-- 右眼编辑器 -->
                        <div v-if="item.testRightEye">
                            <mt-range
                            v-model="item.rightSight"
                            :min="1"
                            :max="53"
                            :step="1"
                            :bar-height="4">
                            <div slot="end" @click="rangeAddorDelete(true,1,index)" class="rangeAdd"></div>
                            <div slot="start" @click="rangeAddorDelete(true,-1,index)" class="rangeDelete"></div>
                            </mt-range>
                        </div>
                        <!-- 双眼编辑器 -->
                        <div v-if="item.testBothEyes">
                            <mt-range
                            v-model="item.bothSight"
                            :min="1"
                            :max="53"
                            :step="1"
                            :bar-height="4">
                            <div slot="end" @click="rangeAddorDelete(3,1,index)" class="rangeAdd"></div>
                            <div slot="start" @click="rangeAddorDelete(3,-1,index)" class="rangeDelete"></div>
                            </mt-range>
                        </div>
                    </div>
                </div>
            </mt-index-section>
        </mt-index-list>
    </div>
    
</template>
<script>
    export default {
        data() {
            return {
                slots: [{
                    flex: 1,
                    values: ['37.0', '37.1'],
                    className: 'slot1',
                    textAlign: 'center'
                }],
                popupfeverNum: false,
                active: false,
                feverNum: null,
                temperatureType: false,
            }
        },
        props: ["showData", "moreFunction", "testType"],
        computed: {
            siteData: function() {
                var array = [];
                let AllZiMu = this.showData.map(x => {
                    //从 showData里面提取以sortName为子对象的数组
                    return x.sortName;
                });
                AllZiMu = AllZiMu.filter((element, index, self) => {
                    //过滤相同子节点
                    return self.indexOf(element) === index;
                });
                return AllZiMu;
            }
        },
        methods: {
            more(index) {
                this.moreFunction(index);
            },
            rangeAddorDelete(state, addNum, index) { //加上addNum,addNum允许为负数
                switch (this.testType) {
                    case 1: //体温加减,
                        if (!this.showData[index].feverNum) { //如果undefined
                            this.showData[index].feverNum = 0;
                        }
                        if (370 <= this.showData[index].feverNum + addNum <= 420) {
                            this.$set(this.showData[index], 'feverNum', this.showData[index].feverNum + addNum);
                        }
                        break;
                    case 2: //身高体重加减
                        if (!state) { //!true为体重
                            if (!this.showData[index].height) { //如果undefined
                                this.$set(this.showData[index], 'height', 0);
                            }
                            if (1 <= this.showData[index].height + addNum && this.showData[index].height + addNum <= 200) {
                                this.$set(this.showData[index], 'height', this.showData[index].height + addNum);
                            }
                        } else {
                            if (!this.showData[index].weight) { //如果undefined
                                this.$set(this.showData[index], 'weight', 0);
                            }
                            if (1 <= this.showData[index].weight + addNum && this.showData[index].weight + addNum <= 200) {
                                this.$set(this.showData[index], 'weight', this.showData[index].weight + addNum);
                            }
                        }
                        break;
                    case 3: //视力加减
                        if (!state) { //!true为左眼
                            if (!this.showData[index].leftSight) { //如果undefined
                                this.$set(this.showData[index], 'leftSight', 0);
                            }
                            if (1 <= this.showData[index].leftSight + addNum && this.showData[index].leftSight + addNum <= 53) {
                                this.$set(this.showData[index], 'leftSight', this.showData[index].leftSight + addNum);
                            }
                        } else {
                            if (state == 3) { //双眼,
                                if (!this.showData[index].bothSight) { //如果undefined
                                    this.$set(this.showData[index], 'bothSight', 0);
                                }
                                if (1 <= this.showData[index].bothSight + addNum && this.showData[index].bothSight + addNum <= 53) {
                                    this.$set(this.showData[index], 'bothSight', this.showData[index].bothSight + addNum);
                                }
                            } else { //右眼
                                if (!this.showData[index].rightSight) { //如果undefined
                                    this.$set(this.showData[index], 'rightSight', 0);
                                }
                                if (1 <= this.showData[index].rightSight + addNum && this.showData[index].rightSight + addNum <= 53) {
                                    this.$set(this.showData[index], 'rightSight', this.showData[index].rightSight + addNum);
                                }
                            }
                        }

                        break;
                }
            },
            testHeathy(state, index) { //健康测试
                // this.showData[index].temperatureType = temperatureType
                switch (this.testType) {
                    case 1: //测体温
                        this.$set(this.showData[index], 'temperatureType', state ? 1 : 0)
                        break;
                    case 2: //测身高体重
                        if (!state) { //!true为体重
                            this.$set(this.showData[index], 'testHign', true); //体重进入编辑状态
                            this.$set(this.showData[index], 'testWeight', false);
                        } else {
                            this.$set(this.showData[index], 'testHign', false);
                            this.$set(this.showData[index], 'testWeight', true); //身高进入编辑状态
                        }
                        break;
                    case 3: //测视力
                        if (!state) { //!true为左眼
                            this.$set(this.showData[index], 'testLeftEye', true); //左眼进入编辑状态
                            this.$set(this.showData[index], 'testRightEye', false);
                            this.$set(this.showData[index], 'testBothEyes', false);
                        } else {
                            if (state == 3) { //双眼
                                this.$set(this.showData[index], 'testBothEyes', true); //双眼进入编辑状态
                                this.$set(this.showData[index], 'testLeftEye', false);
                                this.$set(this.showData[index], 'testRightEye', false);
                            } else { //右眼
                                this.$set(this.showData[index], 'testBothEyes', false);
                                this.$set(this.showData[index], 'testLeftEye', false);
                                this.$set(this.showData[index], 'testRightEye', true); //右眼进入编辑状态
                            }

                        }
                        break;
                }
            }
        },
        rangeAddorDelete() {

        },
        created() {
            // this.showData.map(element=>{
            //     element
            // })
        }
    };
</script>
<style scoped>
    .tempType label {
        width: 1.25rem;
        height: 0.6875rem;
        font-size: 12px;
        border: 1px solid rgba(204, 102, 0, 1);
        border-radius: 3px;
        box-shadow: none;
        color: #cc6600;
    }
    
    .activeLable {
        background: rgba(204, 102, 0, 1)!important;
        color: #fff!important;
    }
</style>